<template>
	<!-- <router-link to="/home_report">社区报告</router-link> -->
	<div id="menu" class="menu">
		<div id="one" class="subMenu text-center">
			<router-link to="/home" active-class="ac_cloor">
				<img class="menu_img" src="../assets/img/i1.png" />
				<div class="menu_name">
					<span>首&nbsp;页</span>
				</div>
			</router-link>
			<!-- <div class="menu_name"><router-link to="/home">首页</router-link></div> -->
		</div>
		<div id="two" class="subMenu text-center">
			<router-link to="/news" active-class="ac_cloor">
				<img class="menu_img" src="../assets/img/i2.png" />
				<div class="menu_name">
					<span>新&nbsp;闻</span>
				</div>
			</router-link>
			<!-- <div class="menu_name"><span style="color: black">新闻</span></div> -->
		</div>
		<!-- <div id="three" class="subMenu text-center"   >
			<img class="menu_img" src="../assets/img/addbai.svg" />
			<div class="menu_name" style="padding-left: 8px;">发布</div>
		</div> -->
		<!-- <div id="three_2" class="subMenu text-center"   > -->
		<!-- <img class="menu_img" src="../assets/img/add.svg" /> -->
		<!-- <div class="menu_name">发布 </div> -->
		<!-- </div> -->
		<div id="four" class="subMenu text-center">
			<router-link to="/message" active-class="ac_cloor">
				<img class="menu_img" src="../assets/img/i3.png" />
				<div class="menu_name">
					<span>信&nbsp;息</span>
				</div>
			</router-link>

			<!-- <div class="menu_name">信息</div> -->
		</div>
		<div id="five" class="subMenu text-center">
			<router-link to="/user" active-class="ac_cloor">
				<img class="menu_img" src="../assets/img/i4.png" />
				<div class="menu_name">
					<span>我&nbsp;的</span>
				</div>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'app-footer',
		props: {},
		components: {},
		mounted() {},
		updated() {},
		methods: {}
	};
</script>

<style scoped>
	* {
		box-sizing: border-box;
		font-size: 1.02em;
	}
	body {
		margin: 0;
		font-family: 微软雅黑;
	}
	a {
		text-decoration: none;
		color: #333;
	}
	span:active {
		text-decoration: none;
		color: #333;
	}

	header {
		padding-top: 0.4em;
		height: 2.1em;
		color: #fff;
		font-size: 0.95em;
		background: linear-gradient(to bottom right, #e51a14, #e51a14);
	}

	.menu {
		display: block;
		width: 100%;
		height: 4em;
		color: #474747;
		padding-top: 10px;
		border-top: 1px solid #eee;
		background-color: #fff;
		position: fixed;
		left: 0px;
		bottom: 0px;
		z-index: 1000;
	}

	.ac_cloor {
		color: #ef8329
	}

	.subMenu {
		width: 25%;
		float: left;
		cursor: pointer;
	}

	.menu_name {
		height: 1.2em;
		width: 100%;
		line-height: 1.2em;
		font-size: 0.8em;
		margin-top: 4px;
	}

	img.menu_img {
		height: 24px;
		width: 24px;
	}

	img {
		vertical-align: middle;
		border: 0;
	}

	.text-center {
		text-align: center;
	}

	#three {
		width: 4em;
		height: 4em;
		background-color: #ffffff;
	}

	#three_2 {
		width: 4em;
		height: 4em;
		position: fixed;
		bottom: 1em !important;
		margin-left: 40%;
		border-radius: 2em;
	}

	#three_2>img {
		width: 3.5em;
		height: 3.5em;
	}
</style>
